{% extends 'base.html' %}
{% load static %}

{% block title %}对战排行榜 - Creeps Judge{% endblock %}

{% block extra_css %}
<style>

    .page-header {
        background: linear-gradient(135deg, rgba(0, 0, 0, 0.8) 0%, rgba(30, 30, 60, 0.9) 100%);
        backdrop-filter: blur(15px);
        color: white;
        padding: 30px 0;
        margin-bottom: 30px;
        text-align: center;
        border-bottom: 2px solid rgba(100, 150, 255, 0.4);
    }

    .page-header h1 {
        font-size: 3rem;
        background: linear-gradient(135deg, #00d4ff, #6496ff, #ffffff);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        margin-bottom: 1rem;
        text-shadow:
            0 0 5px rgba(0, 212, 255, 0.4),
            0 0 10px rgba(0, 212, 255, 0.3),
            0 0 15px rgba(0, 212, 255, 0.2);
        filter: drop-shadow(0 0 8px rgba(0, 212, 255, 0.3));
        font-weight: 600;
    }

    .container {
        background: transparent;
        backdrop-filter: none;
        border-radius: 0;
        padding: 0;
        margin-top: 20px;
        margin-bottom: 20px;
        box-shadow: none;
        border: none;
        color: rgba(255, 255, 255, 0.9);
    }

    /* 页面标题栏 */
    .title-bar {
        background: linear-gradient(135deg, rgba(45, 55, 85, 0.4) 0%, rgba(35, 45, 75, 0.6) 100%);
        backdrop-filter: blur(20px);
        border-radius: 15px;
        border: 1px solid rgba(120, 140, 200, 0.3);
        padding: 20px 25px;
        margin-bottom: 25px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        box-shadow:
            0 8px 32px rgba(0, 0, 0, 0.2),
            0 0 15px rgba(120, 140, 200, 0.1),
            inset 0 0 20px rgba(255, 255, 255, 0.03);
    }

    .title-bar h2 {
        color: rgba(220, 230, 255, 0.95);
        margin: 0;
        font-size: 1.8rem;
        font-weight: 600;
    }

    .title-bar h2 i {
        color: rgba(255, 193, 7, 0.9);
        margin-right: 10px;
    }

    .action-buttons {
        display: flex;
        gap: 10px;
    }

    .btn-modern {
        background: linear-gradient(135deg, rgba(120, 140, 200, 0.15), rgba(100, 120, 180, 0.2));
        border: 1px solid rgba(120, 140, 200, 0.3);
        color: rgba(200, 215, 245, 0.9);
        padding: 8px 16px;
        border-radius: 8px;
        text-decoration: none;
        font-size: 0.85rem;
        font-weight: 500;
        display: flex;
        align-items: center;
        gap: 6px;
        transition: all 0.3s ease;
    }

    .btn-modern:hover {
        background: linear-gradient(135deg, rgba(120, 140, 200, 0.25), rgba(100, 120, 180, 0.3));
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(120, 140, 200, 0.2);
        color: rgba(220, 230, 255, 0.95);
        text-decoration: none;
    }

    /* 我的排名卡片 */
    .my-rank-card {
        background: linear-gradient(135deg, rgba(45, 55, 85, 0.4) 0%, rgba(35, 45, 75, 0.6) 100%);
        backdrop-filter: blur(20px);
        border-radius: 20px;
        border: 1px solid rgba(120, 140, 200, 0.3);
        margin-bottom: 25px;
        overflow: hidden;
        box-shadow:
            0 8px 32px rgba(0, 0, 0, 0.2),
            0 0 15px rgba(120, 140, 200, 0.1),
            inset 0 0 20px rgba(255, 255, 255, 0.03);
    }

    .my-rank-header {
        background: linear-gradient(135deg, rgba(60, 80, 120, 0.6), rgba(50, 70, 110, 0.7));
        color: rgba(220, 230, 255, 0.95);
        padding: 20px 25px;
        border-bottom: 1px solid rgba(120, 140, 200, 0.2);
    }

    .my-rank-header h5 {
        margin: 0;
        font-weight: 600;
        font-size: 1.1rem;
    }

    .my-rank-header i {
        color: rgba(255, 193, 7, 0.9);
        margin-right: 8px;
    }

    .my-rank-body {
        padding: 25px;
    }

    .rank-stats {
        display: grid;
        grid-template-columns: auto 1fr auto auto auto;
        gap: 20px;
        align-items: center;
    }

    .rank-number {
        text-align: center;
    }

    .rank-number h3 {
        color: rgba(255, 193, 7, 0.9);
        margin: 0;
        font-size: 2.2rem;
        font-weight: bold;
    }

    .rank-number p {
        color: rgba(160, 180, 220, 0.7);
        margin: 0;
        font-size: 0.85rem;
    }

    .user-info h5 {
        color: rgba(220, 230, 255, 0.95);
        margin: 0 0 5px 0;
        font-weight: 600;
    }

    .user-info p {
        color: rgba(160, 180, 220, 0.7);
        margin: 0;
        font-size: 0.9rem;
    }

    .stat-item {
        text-align: center;
    }

    .stat-item h4 {
        margin: 0 0 5px 0;
        font-weight: bold;
        font-size: 1.5rem;
    }

    .stat-item p {
        color: rgba(160, 180, 220, 0.7);
        margin: 0;
        font-size: 0.85rem;
    }

    .stat-rating {
        color: rgba(255, 193, 7, 0.9);
    }

    .stat-wins {
        color: rgba(80, 200, 120, 1);
    }

    .win-rate-section {
        text-align: center;
        min-width: 120px;
    }

    .progress-modern {
        height: 20px;
        background: rgba(120, 140, 200, 0.15);
        border-radius: 10px;
        overflow: hidden;
        border: 1px solid rgba(120, 140, 200, 0.2);
    }

    .progress-bar-modern {
        height: 100%;
        background: linear-gradient(90deg, rgba(80, 200, 120, 0.8), rgba(60, 180, 100, 0.9));
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-weight: 600;
        font-size: 0.8rem;
        transition: width 0.3s ease;
    }

    .win-rate-label {
        color: rgba(160, 180, 220, 0.7);
        font-size: 0.8rem;
        margin-top: 5px;
    }

    /* 排行榜表格 */
    .ranking-table {
        background: linear-gradient(135deg, rgba(45, 55, 85, 0.4) 0%, rgba(35, 45, 75, 0.6) 100%);
        backdrop-filter: blur(20px);
        border-radius: 20px;
        border: 1px solid rgba(120, 140, 200, 0.3);
        overflow: hidden;
        box-shadow:
            0 8px 32px rgba(0, 0, 0, 0.2),
            0 0 15px rgba(120, 140, 200, 0.1),
            inset 0 0 20px rgba(255, 255, 255, 0.03);
    }

    .ranking-header {
        background: linear-gradient(135deg, rgba(60, 80, 120, 0.6), rgba(50, 70, 110, 0.7));
        color: rgba(220, 230, 255, 0.95);
        padding: 20px 25px;
        border-bottom: 1px solid rgba(120, 140, 200, 0.2);
    }

    .ranking-header h5 {
        margin: 0;
        font-weight: 600;
        font-size: 1.1rem;
    }

    .ranking-header i {
        color: rgba(255, 193, 7, 0.9);
        margin-right: 8px;
    }

    .table-container {
        padding: 0;
    }

    .ranking-table-inner {
        width: 100%;
        border-collapse: collapse;
    }

    .ranking-table-inner thead th {
        background: linear-gradient(135deg, rgba(60, 80, 120, 0.4), rgba(50, 70, 110, 0.5));
        color: rgba(220, 230, 255, 0.95);
        padding: 15px 20px;
        font-weight: 600;
        font-size: 0.9rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        border-bottom: 1px solid rgba(120, 140, 200, 0.2);
        border: none;
    }

    .ranking-table-inner tbody tr {
        background: rgba(255, 255, 255, 0.02);
        border-bottom: 1px solid rgba(120, 140, 200, 0.15);
        transition: all 0.3s ease;
    }

    .ranking-table-inner tbody tr:nth-child(even) {
        background: rgba(255, 255, 255, 0.01);
    }

    .ranking-table-inner tbody tr:hover {
        background: rgba(120, 140, 200, 0.08);
        transform: translateX(3px);
        border-left: 3px solid rgba(120, 140, 200, 0.4);
    }

    .ranking-table-inner tbody tr.current-user {
        background: rgba(140, 170, 255, 0.2);
        border-left: 5px solid rgba(140, 170, 255, 0.8);
        box-shadow: 0 0 15px rgba(140, 170, 255, 0.3);
        font-weight: 600;
        transform: scale(1.02);
        position: relative;
        z-index: 1;
    }
    
    .ranking-table-inner tbody tr.current-user td {
        color: rgba(220, 235, 255, 1);
    }

    .ranking-table-inner tbody tr.current-user:hover {
        background: rgba(140, 170, 255, 0.25);
        box-shadow: 0 0 20px rgba(140, 170, 255, 0.4);
    }

    .ranking-table-inner tbody td {
        padding: 15px 20px;
        color: rgba(200, 215, 245, 0.9);
        border: none;
        vertical-align: middle;
    }

    /* 排名徽章 */
    .rank-badge {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        padding: 6px 12px;
        border-radius: 12px;
        font-weight: 600;
        font-size: 0.85rem;
    }

    .rank-badge.rank-1 {
        background: linear-gradient(135deg, rgba(255, 193, 7, 0.8), rgba(255, 152, 0, 0.8));
        color: white;
        box-shadow: 0 0 15px rgba(255, 193, 7, 0.3);
    }

    .rank-badge.rank-2 {
        background: linear-gradient(135deg, rgba(108, 117, 125, 0.8), rgba(73, 80, 87, 0.8));
        color: white;
        box-shadow: 0 0 15px rgba(108, 117, 125, 0.3);
    }

    .rank-badge.rank-3 {
        background: linear-gradient(135deg, rgba(220, 53, 69, 0.8), rgba(176, 42, 55, 0.8));
        color: white;
        box-shadow: 0 0 15px rgba(220, 53, 69, 0.3);
    }

    .rank-badge.rank-other {
        background: rgba(120, 140, 200, 0.15);
        color: rgba(200, 215, 245, 0.9);
        border: 1px solid rgba(120, 140, 200, 0.3);
    }

    /* 用户信息 */
    .user-display {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .user-avatar {
        width: 35px;
        height: 35px;
        border-radius: 50%;
        border: 2px solid rgba(120, 140, 200, 0.3);
    }

    .user-avatar-placeholder {
        width: 35px;
        height: 35px;
        border-radius: 50%;
        background: linear-gradient(135deg, rgba(120, 140, 200, 0.6), rgba(100, 120, 180, 0.7));
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-weight: 600;
        font-size: 0.9rem;
        border: 2px solid rgba(120, 140, 200, 0.3);
    }

    .user-name {
        color: rgba(220, 230, 255, 0.95);
        font-weight: 500;
    }

    /* 评分显示 */
    .rating-display {
        color: rgba(255, 193, 7, 0.9);
        font-weight: bold;
        font-size: 1.1rem;
    }

    /* 战绩显示 */
    .record-display {
        display: flex;
        gap: 8px;
        font-size: 0.9rem;
    }

    .record-wins {
        color: rgba(80, 200, 120, 1);
        font-weight: 600;
    }

    .record-losses {
        color: rgba(240, 100, 120, 1);
        font-weight: 600;
    }

    .record-draws {
        color: rgba(255, 193, 7, 0.9);
        font-weight: 600;
    }

    /* 胜率进度条 */
    .winrate-progress {
        width: 80px;
        height: 15px;
        background: rgba(120, 140, 200, 0.15);
        border-radius: 8px;
        overflow: hidden;
        border: 1px solid rgba(120, 140, 200, 0.2);
    }

    .winrate-bar {
        height: 100%;
        background: linear-gradient(90deg, rgba(80, 200, 120, 0.8), rgba(60, 180, 100, 0.9));
        border-radius: 8px;
        transition: width 0.3s ease;
    }

    /* 连胜徽章 */
    .streak-badge {
        background: linear-gradient(135deg, rgba(220, 53, 69, 0.8), rgba(176, 42, 55, 0.8));
        color: white;
        padding: 4px 8px;
        border-radius: 8px;
        font-weight: 600;
        font-size: 0.8rem;
        box-shadow: 0 0 10px rgba(220, 53, 69, 0.3);
    }

    /* 空状态 */
    .empty-state {
        text-align: center;
        padding: 60px 20px;
        color: rgba(160, 180, 220, 0.7);
    }

    .empty-state i {
        font-size: 3rem;
        color: rgba(120, 140, 200, 0.4);
        margin-bottom: 20px;
    }

    .empty-state h5 {
        color: rgba(200, 215, 245, 0.8);
        margin-bottom: 10px;
    }

    .empty-state p {
        color: rgba(160, 180, 220, 0.6);
        margin: 0;
    }

    /* 详细统计数据样式 */
    .my-rank-details {
        margin-top: 15px;
        padding-top: 15px;
        border-top: 1px solid rgba(120, 140, 200, 0.2);
    }

    .detail-stats-mini {
        display: flex;
        gap: 20px;
        justify-content: space-around;
        flex-wrap: wrap;
    }

    .mini-stat-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        min-width: 60px;
    }

    .mini-stat-value {
        font-size: 1.2rem;
        font-weight: 700;
        color: rgba(100, 200, 255, 0.9);
        margin-bottom: 2px;
    }

    .mini-stat-label {
        font-size: 0.75rem;
        color: rgba(160, 180, 220, 0.7);
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    /* 胜率显示样式 */
    .winrate-display {
        display: flex;
        align-items: center;
        gap: 10px;
        min-width: 120px;
    }

    .winrate-progress {
        width: 80px;
        height: 10px;
        background: rgba(120, 140, 200, 0.15);
        border-radius: 10px;
        overflow: hidden;
        border: 1px solid rgba(120, 140, 200, 0.2);
    }

    .winrate-bar {
        height: 100%;
        background: linear-gradient(90deg, rgba(80, 200, 120, 0.8), rgba(60, 180, 100, 0.9));
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-weight: 600;
        font-size: 0.8rem;
        transition: width 0.3s ease;
    }

    .winrate-text {
        font-size: 0.85rem;
        font-weight: 600;
        color: rgba(80, 200, 120, 0.9);
        white-space: nowrap;
    }

    /* 分页样式 */
    .pagination-container {
        margin-top: 30px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }

    .pagination-modern {
        display: flex;
        list-style: none;
        padding: 0;
        margin: 0;
        gap: 5px;
        align-items: center;
    }

    .page-item {
        display: flex;
    }

    .page-link {
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 40px;
        height: 40px;
        padding: 8px 12px;
        background: linear-gradient(135deg, rgba(120, 140, 200, 0.15), rgba(100, 120, 180, 0.2));
        border: 1px solid rgba(120, 140, 200, 0.3);
        color: rgba(200, 215, 245, 0.9);
        text-decoration: none;
        border-radius: 8px;
        font-weight: 500;
        font-size: 0.9rem;
        transition: all 0.3s ease;
    }

    .page-link:hover {
        background: linear-gradient(135deg, rgba(120, 140, 200, 0.25), rgba(100, 120, 180, 0.3));
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(120, 140, 200, 0.2);
        color: rgba(220, 230, 255, 0.95);
        text-decoration: none;
    }

    .page-item.active .page-link {
        background: linear-gradient(135deg, rgba(255, 193, 7, 0.8), rgba(255, 152, 0, 0.8));
        color: white;
        border-color: rgba(255, 193, 7, 0.6);
        box-shadow: 0 0 15px rgba(255, 193, 7, 0.3);
        font-weight: 600;
    }

    .page-item.active .page-link:hover {
        background: linear-gradient(135deg, rgba(255, 193, 7, 0.9), rgba(255, 152, 0, 0.9));
        transform: none;
    }

    .pagination-info {
        display: flex;
        gap: 20px;
        color: rgba(160, 180, 220, 0.7);
        font-size: 0.85rem;
        text-align: center;
    }

    .pagination-info span {
        padding: 8px 15px;
        background: rgba(120, 140, 200, 0.1);
        border-radius: 6px;
        border: 1px solid rgba(120, 140, 200, 0.2);
    }

    /* 动态宽度样式 */
    .progress-bar-modern[data-width] {
        width: var(--progress-width, 0%);
    }
    
    .winrate-bar[data-width] {
        width: var(--winrate-width, 0%);
    }
    
    /* 响应式设计 */
    @media (max-width: 768px) {
        .title-bar {
            flex-direction: column;
            gap: 15px;
            text-align: center;
        }

        .action-buttons {
            justify-content: center;
        }

        .rank-stats {
            grid-template-columns: 1fr;
            gap: 15px;
            text-align: center;
        }

        .ranking-table-inner {
            font-size: 0.85rem;
        }

        .ranking-table-inner thead th,
        .ranking-table-inner tbody td {
            padding: 10px 15px;
        }

        .user-display {
            flex-direction: column;
            gap: 5px;
            text-align: center;
        }

        .record-display {
            justify-content: center;
        }
    }

    @media (max-width: 480px) {
        .ranking-table-inner {
            font-size: 0.8rem;
        }

        .ranking-table-inner thead th,
        .ranking-table-inner tbody td {
            padding: 8px 10px;
        }

        .user-avatar,
        .user-avatar-placeholder {
            width: 30px;
            height: 30px;
            font-size: 0.8rem;
        }

        .rank-badge {
            padding: 4px 8px;
            font-size: 0.75rem;
        }

        .pagination-modern {
            gap: 3px;
        }

        .page-link {
            min-width: 35px;
            height: 35px;
            padding: 6px 10px;
            font-size: 0.8rem;
        }

        .pagination-info {
            flex-direction: column;
            gap: 10px;
        }
    }
</style>
<script>
    // 设置进度条宽度
    document.addEventListener('DOMContentLoaded', function() {
        document.querySelectorAll('[data-width]').forEach(function(element) {
            const width = element.getAttribute('data-width');
            if (element.classList.contains('progress-bar-modern')) {
                element.style.setProperty('--progress-width', width + '%');
                element.style.width = width + '%';
            } else if (element.classList.contains('winrate-bar')) {
                element.style.setProperty('--winrate-width', width + '%');
                element.style.width = width + '%';
            }
        });
    });
</script>
{% endblock %}

{% block content %}
<div class="container mt-4">
    <!-- 页面标题栏 -->
    <div class="title-bar">
        <h2><i class="fas fa-trophy"></i> 对战排行榜</h2>
        <div class="action-buttons">
            <a href="{% url 'battles:battle_statistics' %}" class="btn-modern">
                <i class="fas fa-chart-bar"></i> 我的统计
            </a>
            <a href="{% url 'battles:battle_list' %}" class="btn-modern">
                <i class="fas fa-list"></i> 对战列表
            </a>
        </div>
    </div>

    <!-- 我的排名 -->
    {% if user_stats %}
    <div class="my-rank-card">
        <div class="my-rank-header">
            <h5><i class="fas fa-user"></i> 我的排名</h5>
        </div>
        <div class="my-rank-body">
            <div class="rank-stats">
                <div class="rank-number">
                    <h3>#{{ user_rank }}</h3>
                    <p>当前排名</p>
                </div>
                <div class="user-info">
                    <h5>{{ user.username }}</h5>
                    <p>{{ user_stats.total_battles }} 场对战</p>
                </div>
                <div class="stat-item">
                    <h4 class="stat-rating">{{ user_stats.rating }}</h4>
                    <p>评分</p>
                </div>
                <div class="stat-item">
                    <h4 class="stat-wins">{{ user_stats.wins }}</h4>
                    <p>胜利</p>
                </div>
                <div class="win-rate-section">
                    <div class="progress-modern">
                        {% with win_rate=user_stats.get_win_rate %}
                        <div class="progress-bar-modern" data-width="{{ win_rate }}">
                            {{ win_rate|floatformat:1 }}%
                        </div>
                        {% endwith %}
                    </div>
                    <div class="win-rate-label">胜率</div>
                </div>
            </div>
            <!-- 详细统计数据 -->
            {% if user_detailed_stats %}
            <div class="my-rank-details">
                <div class="detail-stats-mini">
                    <div class="mini-stat-item">
                        <span class="mini-stat-value">{{ user_detailed_stats.total_kills }}</span>
                        <span class="mini-stat-label">击杀</span>
                    </div>
                    <div class="mini-stat-item">
                        <span class="mini-stat-value">{{ user_kd_ratio|floatformat:2 }}</span>
                        <span class="mini-stat-label">K/D</span>
                    </div>
                    <div class="mini-stat-item">
                        <span class="mini-stat-value">{{ user_detailed_stats.total_damage_dealt|floatformat:0 }}</span>
                        <span class="mini-stat-label">伤害</span>
                    </div>
                    <div class="mini-stat-item">
                        <span class="mini-stat-value">{{ user_detailed_stats.total_healing|floatformat:0 }}</span>
                        <span class="mini-stat-label">治疗</span>
                    </div>
                </div>
            </div>
            {% endif %}
        </div>
    </div>
    {% endif %}

    <!-- 排行榜 -->
    <div class="ranking-table">
        <div class="ranking-header">
            <h5><i class="fas fa-list-ol"></i> 全球排行榜</h5>
        </div>
        <div class="table-container">
            <table class="ranking-table-inner">
                <thead>
                    <tr>
                        <th>排名</th>
                        <th>用户</th>
                        <th>评分</th>
                        <th>对战</th>
                        <th>胜/负/平</th>
                        <th>胜率</th>
                        <th>连胜</th>
                    </tr>
                </thead>
                <tbody>
                    {% for stat in top_stats %}
                    {% with rank_number=page_obj.start_index|add:forloop.counter0 %}
                    <tr {% if stat.user == request.user %}class="current-user"{% endif %}>
                        <td>
                            {% if rank_number == 1 %}
                                <span class="rank-badge rank-1"><i class="fas fa-crown"></i> 1</span>
                            {% elif rank_number == 2 %}
                                <span class="rank-badge rank-2"><i class="fas fa-medal"></i> 2</span>
                            {% elif rank_number == 3 %}
                                <span class="rank-badge rank-3"><i class="fas fa-medal"></i> 3</span>
                            {% else %}
                                <span class="rank-badge rank-other">{{ rank_number }}</span>
                            {% endif %}
                        </td>
                        <td>
                            <div class="user-display">
                                {% if stat.user.profile.avatar %}
                                    <img src="{{ stat.user.profile.avatar.url }}"
                                         alt="{{ stat.user.username }}"
                                         class="user-avatar">
                                {% else %}
                                    <div class="user-avatar-placeholder">
                                        {{ stat.user.username|first|upper }}
                                    </div>
                                {% endif %}
                                <span class="user-name">{{ stat.user.username }}</span>
                            </div>
                        </td>
                        <td>
                            <span class="rating-display">{{ stat.rating }}</span>
                        </td>
                        <td>{{ stat.total_battles }}</td>
                        <td>
                            <div class="record-display">
                                <span class="record-wins">{{ stat.wins }}</span> /
                                <span class="record-losses">{{ stat.losses }}</span> /
                                <span class="record-draws">{{ stat.draws }}</span>
                            </div>
                        </td>
                        <td>
                            <div class="winrate-display">
                                {% with win_rate=stat.get_win_rate %}
                                <div class="winrate-progress">
                                    <div class="winrate-bar" data-width="{{ win_rate }}"></div>
                                </div>
                                <span class="winrate-text">{{ win_rate|floatformat:1 }}%</span>
                                {% endwith %}
                            </div>
                        </td>
                        <td>
                            {% if stat.longest_streak > 0 %}
                                <span class="streak-badge">{{ stat.longest_streak }}</span>
                            {% else %}
                                <span class="text-muted">-</span>
                            {% endif %}
                        </td>
                    </tr>
                    {% endwith %}
                    {% empty %}
                    <tr>
                        <td colspan="7">
                            <div class="empty-state">
                                <i class="fas fa-trophy"></i>
                                <h5>暂无排名数据</h5>
                                <p>成为第一个上榜的玩家！</p>
                            </div>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>

    <!-- 分页导航 -->
    {% if page_obj.has_other_pages %}
    <div class="pagination-container">
        <nav aria-label="排行榜分页">
            <ul class="pagination-modern">
                {% if page_obj.has_previous %}
                    <li class="page-item">
                        <a class="page-link" href="?page=1" aria-label="首页">
                            <i class="fas fa-angle-double-left"></i>
                        </a>
                    </li>
                    <li class="page-item">
                        <a class="page-link" href="?page={{ page_obj.previous_page_number }}" aria-label="上一页">
                            <i class="fas fa-angle-left"></i>
                        </a>
                    </li>
                {% endif %}

                {% for num in page_obj.paginator.page_range %}
                    {% if page_obj.number == num %}
                        <li class="page-item active">
                            <span class="page-link current">{{ num }}</span>
                        </li>
                    {% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %}
                        <li class="page-item">
                            <a class="page-link" href="?page={{ num }}">{{ num }}</a>
                        </li>
                    {% endif %}
                {% endfor %}

                {% if page_obj.has_next %}
                    <li class="page-item">
                        <a class="page-link" href="?page={{ page_obj.next_page_number }}" aria-label="下一页">
                            <i class="fas fa-angle-right"></i>
                        </a>
                    </li>
                    <li class="page-item">
                        <a class="page-link" href="?page={{ page_obj.paginator.num_pages }}" aria-label="末页">
                            <i class="fas fa-angle-double-right"></i>
                        </a>
                    </li>
                {% endif %}
            </ul>
        </nav>
        <div class="pagination-info">
            <span>第 {{ page_obj.number }} 页，共 {{ page_obj.paginator.num_pages }} 页</span>
            <span>总计 {{ page_obj.paginator.count }} 位玩家</span>
        </div>
    </div>
    {% endif %}
</div>
{% endblock %}